<template>
  <div class="list">
    <header>
      <div><i class="iconfont icon-fanhui1"></i></div>
      <div class="search">
        <i class="iconfont icon-sousuo"></i>
        <span>搜你喜欢的...</span>
      </div>
      <div><img src="@/assets/images/home.png" alt="" /></div>
    </header>
    <section>
      <div class="list-left">
        <ul class="l-item">
          <li class="active">推荐</li>
          <li>红茶</li>
          <li>绿茶</li>
          <li>白茶</li>
          <li>推荐</li>
          <li>推荐</li>
        </ul>
      </div>
      <div class="list-right">
        <div>
          <ul>
            <li class="shop-list">
              <h2>推荐</h2>
              <ul class="r-content">
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>

                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
              </ul>
            </li>
          </ul>
          <ul>
            <li class="shop-list">
              <h2>红茶</h2>
              <ul class="r-content">
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>

                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
              </ul>
            </li>
          </ul>
          <ul>
            <li class="shop-list">
              <h2>绿茶</h2>
              <ul class="r-content">
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>

                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
              </ul>
            </li>
          </ul>
          <ul>
            <li class="shop-list">
              <h2>白茶</h2>
              <ul class="r-content">
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>

                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
                <li>
                  <img src="@/assets/images/list1.jpeg" alt="" />
                  <span>铁观音</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../../components/common/Tabbar.vue";

export default {
  name: "Cart",
  components: {
    Tabbar,
  },
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 44px;
  background-color: #b0352f;
  i {
    color: #fff;
    font-size: 21px;
  }
  .search {
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #b3b3b3;
    font-size: 14px;
    width: 200px;
    padding: 4px 40px 4px 10px;
    border-radius: 22px;
    i {
      font-size: 16px;
      color: #b3b3b3;
      padding-right: 10px;
    }
  }
  img {
    width: 30px;
    color: #fff;
  }
}
section {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.list-left {
  width: 90px;
  background-color: #fff;
  overflow: hidden;
  .l-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    li {
      width: 100%;
      line-height: 38px;
    }
  }
}
.active {
  color: #b0352f;
  border-left: 6px solid #b0352f;
}
.list-right {
  flex: 1;
  overflow: hidden;
  border-left: 1px solid #ccc;
  .shop-list {
    text-align: center;
    h2 {
      font-size: 16px;
      padding: 10px 0;
    }
    .r-content {
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        justify-items: center;
        font-size: 14px;
        width: 33.33%;
        // margin-bottom: 10px;
        padding: 10px 0;
        img {
          width: 53px;
        }
      }
    }
  }
}
::v-deep.tarbar {
  border-top: 1px solid #ccc;
}
</style>